<!DOCTYPE html>
<html>
<head>
    <title>Inclined Plane Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // --- Configuration ---
        const scale = 75; // pixels per meter
        const origin = { x: 120, y: 380 }; // Bottom-left corner of the triangle

        const height_m = 3.0;
        const base_m = 4.0;

        const height_px = height_m * scale;
        const base_px = base_m * scale;

        // --- Triangle vertices ---
        const p_bottom_left = { x: origin.x, y: origin.y };
        const p_bottom_right = { x: origin.x + base_px, y: origin.y };
        const p_top_left = { x: origin.x, y: origin.y - height_px };

        // --- Drawing ---

        // 1. Draw the ground line
        ctx.beginPath();
        ctx.moveTo(p_bottom_left.x - 80, p_bottom_left.y);
        ctx.lineTo(p_bottom_right.x + 80, p_bottom_right.y);
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.stroke();

        // 2. Draw the main triangle
        ctx.beginPath();
        ctx.moveTo(p_top_left.x, p_top_left.y);
        ctx.lineTo(p_bottom_left.x, p_bottom_left.y);
        ctx.lineTo(p_bottom_right.x, p_bottom_right.y);
        ctx.closePath();
        ctx.lineWidth = 12;
        ctx.strokeStyle = 'black';
        ctx.lineJoin = 'miter';
        ctx.stroke();

        // 3. Draw the right-angle symbol
        const angleBoxSize = 28;
        ctx.beginPath();
        ctx.moveTo(p_bottom_left.x, p_bottom_left.y - angleBoxSize);
        ctx.lineTo(p_bottom_left.x + angleBoxSize, p_bottom_left.y - angleBoxSize);
        ctx.lineTo(p_bottom_left.x + angleBoxSize, p_bottom_left.y);
        ctx.lineWidth = 3;
        ctx.stroke();

        // --- Dimensions and Labels ---
        ctx.fillStyle = 'black';
        ctx.font = 'bold 34px sans-serif';
        ctx.lineWidth = 2;
        const arrowSize = 15;

        // Height Dimension (3.0 m)
        const h_dim_line_x = p_bottom_left.x - 60;
        ctx.beginPath();
        ctx.moveTo(h_dim_line_x, p_top_left.y);
        ctx.lineTo(h_dim_line_x, p_bottom_left.y);
        // Top arrow
        ctx.moveTo(h_dim_line_x, p_top_left.y);
        ctx.lineTo(h_dim_line_x - arrowSize/2, p_top_left.y + arrowSize);
        ctx.moveTo(h_dim_line_x, p_top_left.y);
        ctx.lineTo(h_dim_line_x + arrowSize/2, p_top_left.y + arrowSize);
        // Bottom arrow
        ctx.moveTo(h_dim_line_x, p_bottom_left.y);
        ctx.lineTo(h_dim_line_x - arrowSize/2, p_bottom_left.y - arrowSize);
        ctx.moveTo(h_dim_line_x, p_bottom_left.y);
        ctx.lineTo(h_dim_line_x + arrowSize/2, p_bottom_left.y - arrowSize);
        ctx.stroke();
        
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('3.0 m', h_dim_line_x - 15, (p_top_left.y + p_bottom_left.y) / 2);

        // Base Dimension (4.0 m)
        const b_dim_line_y = p_bottom_left.y + 40;
        ctx.beginPath();
        ctx.moveTo(p_bottom_left.x, b_dim_line_y);
        ctx.lineTo(p_bottom_right.x, b_dim_line_y);
        // Left arrow
        ctx.moveTo(p_bottom_left.x, b_dim_line_y);
        ctx.lineTo(p_bottom_left.x + arrowSize, b_dim_line_y - arrowSize/2);
        ctx.moveTo(p_bottom_left.x, b_dim_line_y);
        ctx.lineTo(p_bottom_left.x + arrowSize, b_dim_line_y + arrowSize/2);
        // Right arrow
        ctx.moveTo(p_bottom_right.x, b_dim_line_y);
        ctx.lineTo(p_bottom_right.x - arrowSize, b_dim_line_y - arrowSize/2);
        ctx.moveTo(p_bottom_right.x, b_dim_line_y);
        ctx.lineTo(p_bottom_right.x - arrowSize, b_dim_line_y + arrowSize/2);
        ctx.stroke();

        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('4.0 m', (p_bottom_left.x + p_bottom_right.x) / 2, b_dim_line_y + 10);

        // Hypotenuse Label (5.0 m)
        ctx.textAlign = 'left';
        ctx.textBaseline = 'bottom';
        const midHypX = (p_top_left.x + p_bottom_right.x) / 2;
        const midHypY = (p_top_left.y + p_bottom_right.y) / 2;
        ctx.fillText('5.0 m', midHypX + 10, midHypY);
    </script>
</body>
</html>